<template>
		<view class="zuipageWrap">
		<view class="J_conditionWrap uni-flex uni-row">
			<view class="text des">药品：</view>
			<view class="text inputwrap zimpo" style="flex: 1;">
				<view class="uni-list-cell-navigate uni-navigate-right" @tap="choosedrug">
					<view class="zpicker">
						<text v-if="w_drugId">{{w_drugId.name}}</text>
						<text v-if="!w_drugId" style="color: gray;">请选择药品</text>
					</view>
				</view>
			</view>
		</view>
		<view class="J_top">
			<uniIcon type="search" size="26" class="J_searchIcon"></uniIcon>
			<view class="J_search">
				<input class="uni-input" confirm-type="search" placeholder="请输入类别码"
					v-model="invoiceId" @input="inputEvent" @confirm="inputConfirm" :maxlength="maxlength" :focus="triggerFocus1" />
			</view>
			<uniIcon type="scan" size="26" class="J_scanIcon" @click="scanCode"></uniIcon>
		</view>
		<view class="J_conditionWrap uni-flex uni-row J_level">
			<view class="text des">包装：</view>
			<view class="text inputwrap zimpo" style="flex: 1;">
				<view class="uni-list-cell-navigate uni-navigate-right" @tap="chooselevel">
					<view class="zpicker">
						<text v-if="levelDes">{{levelDes}}</text>
						<text v-if="!levelDes" style="color: gray;">请选择包装级别</text>
					</view>
				</view>
			</view>
		</view>
		<view class="J_conditionWrap uni-flex uni-row J_level">
			<view class="text des">数量：</view>
			<view class="text inputwrap zimpo" style="flex: 1;">
				<view class="zpicker J_inputWrap">
					<input class="uni-input" type="number" v-model="num" :maxlength="maxlength" />
				</view>
			</view>
		</view>
		<view class="J_conditionWrap uni-flex uni-row J_content">
			<view class="J_card" v-if="tempDrugInfo" style="flex: 1;">
				<view class="uni-flex uni-row">
					<view class="J_tit">
						<view class="J_cicon"></view>
						已存在品种
					</view>
				</view>
				<view class="uni-flex uni-row">
					<view class="J_label">品名：</view>
					<view class="J_des">{{tempDrugInfo.name}}</view>
				</view>
				<view class="uni-flex uni-row">
					<view class="J_label">规格：</view>
					<view class="J_des">{{tempDrugInfo.specifications}}</view>
				</view>
				<view class="uni-flex uni-row">
					<view class="J_label">单位：</view>
					<view class="J_des">{{tempDrugInfo.unit}}</view>
				</view>
				<view class="uni-flex uni-row">
					<view class="J_label">厂商：</view>
					<view class="J_des">{{tempDrugInfo.factory}}</view>
				</view>				
			</view>
		</view>
		<!-- <view class="J_conditionWrap uni-flex uni-row J_radio">
			<radio-group @change="radioChange">
				<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
					<view>{{item.name}}</view>
					<view>
						<radio :value="item.value" :checked="item.value == type"/>
					</view>
				</label>
			</radio-group>
		</view> -->
		
		<view class="uni-btn-v J_foot">
			<button type="default" class="zbtn J_last" @click="nocategory">未对照</button>
			<button type="default" class="zbtn J_cancel" @click="cancle">取消</button>
			<button class="zbtn J_sub" @click="save">提交</button>
		</view>
		
	</view>
</template>

<script>

import uniIcon from "@/components/uni-icon/uni-icon.vue";
import {zCategorycodeSave, zMedcheckAllList, zCategorycodeById} from '@/util/api';
import {
	mapState,mapGetters,mapMutations,mapActions
} from 'vuex'

export default {
	components: {uniIcon},
	data() {
		return {
			lastResBack: {
				invoiceId: '',
				supplierIndex: '',
				drugStorageIndex: ''
			},
			maxlength: 20,
			triggerFocus1: false,
			curItem_temp: null,
			triggerFocus_temp: false,
			zpopupFlag: false,
			invoiceId_temp: '',
			jwList: [],
			invoiceId: '',
			levelList: ['小包装', '中包装', '大包装'],
			levelDes: '',
			level: '',
			num: '',
			type: '',
			items: [
				{
					value: '0',
					name: '药监码'
				},
				{
					value: '1',
					name: '条形码'
				}
			],
			medCheckInfo: null,
			tempDrugInfo: null
		}
	},
	computed: {
		...mapState(['w_drugId'])
	},
	/* onBackPress() {
		uni.redirectTo({
			url: '/pages/index/index'
		})
		return true;
	}, */
	onLoad(e) {
		let _that = this;
		
		let medCheckRes = uni.getStorageSync('medCheckRes');
		if(medCheckRes){
			medCheckRes = JSON.parse(medCheckRes);
			this.lastResBack = medCheckRes;
		}
		
		let medCheckInfo = uni.getStorageSync('medCheckInfo');
		if(medCheckInfo){
			this.medCheckInfo = JSON.parse(medCheckInfo);
			console.log("this.medCheckInfo: " + JSON.stringify(this.medCheckInfo));
			uni.removeStorageSync('medCheckInfo');
			this.fetchDrugInfo();
		}
		
		let drugId = uni.getStorageSync('drugId');
		if(drugId){
			this.w_setdrugId({id: drugId});
			uni.removeStorageSync('drugId');
		}
		uni.$on('zInvertory',function(data){
			
    })
		
		this.num=1;
		this.level=0;
		this.levelDes = this.levelList[0];
		// this.fetchAllData();
	},
	onNavigationBarButtonTap(e) {
		uni.navigateTo({
			url: '/pages/categorycode/list'
		});
	},
	onUnload() {
		uni.$off('zInvertory');
		this.setLastRes();
	},
	methods: {
		...mapMutations(['w_setdrugId']),
		async fetchDrugInfo () {
			let tpl_param = {
			  goodname: this.medCheckInfo.id
			}
			uni.showLoading({title: '加载中', mask: true});
			let res = await zMedcheckAllList(tpl_param);
			res = this.zutil.formatAxiosData(res);
			this.w_setdrugId(res.data.list[0]);
			uni.hideLoading();
		},
		async fetchInvoice () {
			let tpl_param = {
			  categorycode: this.invoiceId
			}
			uni.showLoading({title: '加载中', mask: true});
			this.tempDrugInfo = null;
			let res = await zCategorycodeById(tpl_param);
			res = this.zutil.formatAxiosData(res);
			console.info(JSON.stringify(res));
			if(res.status == 0){
				if(res.data ){//&& res.data.id
					// 查询出有品种
					this.tempDrugInfo = res.data;
					this.zutil.ztip("已存在品种，无需对照");
				}else{
					this.zutil.ztip(res.message || "未找到对应品种，请对照");
				}
			}
			uni.hideLoading();
		},
		chooselevel() {
			uni.showActionSheet({
				title:'',
				itemList: this.levelList,
				success: (e) => {
					this.level = e.tapIndex;
					this.levelDes = this.levelList[e.tapIndex];
				}
			})
		},
		radioChange(evt) {
			for (let i = 0; i < this.items.length; i++) {
				if (this.items[i].value === evt.target.value) {
					this.type = i;
					break;
				}
			}
		},
		inputEvent (e) {
			/* let _val = e.detail.value;
			if(_val.length == this.maxlength)
				this.fetchInvoice(); */
		},
		inputConfirm (e) {
			let _val = e.detail.value;
			// if(_val.length == this.maxlength)
			this.fetchInvoice();
		},
		cancle () {
			this.setLastRes();
			this.invoiceId = '';
			this.level = '';
			this.levelDes = '';
			this.num = '';
			this.type = '';
			this.tempDrugInfo = null;
			this.w_setdrugId({id: null});
			uni.removeStorageSync('drugId');
		},
		save () {
			if(this.tempDrugInfo){
				this.zutil.ztip("已存在品种，请勿重复对照");
				return false;
			}
			if(!this.w_drugId){
				this.zutil.ztip("请先选择药品");
				return false;
			}
			if(!this.invoiceId){
				this.zutil.ztip("请输入类别码");
				return false;
			}
			if(!this.level && this.level!==0){
				this.zutil.ztip("请选择包装级别");
				return false;
			}
			if(!this.num){
				this.zutil.ztip("请输入数量");
				return false;
			}
			/* if(!this.type && this.type!==0){
				this.zutil.ztip("请选择条码类型");
				return false;
			} */
			this.zutil.zconfirm("是否确认对照该药品？", (type)=>{
				if(type){
					// 确定
					this.saveS();
				}else{
					// 取消
				}
			});
		},
		async saveS () {
			let tpl_param = {
			  drugId: this.w_drugId.id,
				categorycode: this.invoiceId,
				num: this.num,
				level: this.level,
				// type: this.type
			}
			uni.showLoading({title: '加载中', mask: true});
			let res = await zCategorycodeSave(tpl_param);
			res = this.zutil.formatAxiosData(res);
			uni.hideLoading();
		
			console.log(res);
			if(res.status == 0){
				this.zutil.ztip(res.description || "对照药品成功");
				this.cancle();
				if(this.medCheckInfo){
					let str = '对照药品成功，是否返回复核页面？';
					if(this.medCheckInfo.type == 2){
						str = "对照药品成功，是否返回上架页面？";
					}else if(this.medCheckInfo.type == 3){
						str = "对照药品成功，是否返回下架页面？";
					}
					this.zutil.zconfirm(str, (type)=>{
						if(type){
							// 确定
							uni.$emit('zCategoryCode', true);
							uni.navigateBack({
								delta: 1
							})
						}else{
							// 取消
						}
					});
				}
			}else{
				this.zutil.zalert(res.description || "对照药品失败！");
				this.zutil.zuiShaker();
			}
		},
		scanCode () {
			var _that = this;
			uni.scanCode({
				success: function (res) {
					_that.cancle();
					let cres = res.result;
					_that.invoiceId = cres;
					_that.fetchInvoice();
				},
				fail: function (res) {}
			})
		},
		lastRes () {
			let medCheckRes = uni.getStorageSync('medCheckRes');
			if(medCheckRes){
				medCheckRes = JSON.parse(medCheckRes);
				this.lastResBack = medCheckRes;
				this.invoiceId = medCheckRes.invoiceId;
				this.supplierIndex = medCheckRes.supplierIndex;
				this.drugStorageIndex = medCheckRes.drugStorageIndex;
			}
		},
		setLastRes () {
			uni.setStorageSync('medCheckRes', JSON.stringify(this.lastResBack));
		},
		choosedrug () {
			uni.setStorageSync('choosedrugIdFlag', true);
			uni.navigateTo({
				url: '/pages/drugAll/index'
			});
		},
		nocategory () {
			uni.navigateTo({
				url: '/pages/categorycode/nocate'
			});
		},
	},
	filters:{
		//价格过滤器
		// arg表示原始参数,num表示小数点位,默认保留两位,symbol表示符号,spilt是否进行逗号分隔【true，false】
		priceFormat:function (arg,num=0,symbol,spilt=false) {
			/**
			 * 默认数字: {{number|priceFormat()}}
				保留两位小数: {{number|priceFormat(2)}}
				保留三位小数: {{number|priceFormat(3)}}
				添加￥符号并保留两位: {{number|priceFormat(2,'￥')}}
				添加$符号并保留三位: {{number|priceFormat(3,'$')}}
				添加千分号符号: {{number|priceFormat(0,'',true)}}
				添加千分号符号并保留两位: {{number|priceFormat(2,'',true)}}
				添加￥和千分号符号并保留两位: {{number|priceFormat(2,'￥',true)}}
			 **/
			arg=Number(arg).toFixed(num);
			if(spilt==true){
				if (arg.indexOf('.') == -1) {
					arg=arg.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
				}else{
					var parts = arg.split(".");
					parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
					arg=parts.join(".");
				}
			}
			if(symbol){
				arg=symbol+arg;
			}
			return arg;
		},
	}
}
</script>

<style scoped lang="scss">
.zuipageWrap {
	background: #F5F5F5;
	height: 100%;
	
	.J_top {
		position: relative;
		padding: 20upx;
		background: #fff;
		margin-bottom: 20upx;
		
		.J_searchIcon {
			position: absolute;
	    left: 46upx;
	    top: 34upx;
	    z-index: 99;
		}
		.J_search {
			width: 100%;
			height: 80upx;
			display: flex;  
	    align-items: center;
			
			.uni-input {
				height: 80upx;
				line-height: 80upx;
				min-height: 80upx;
				padding: 0 24upx 0 88upx;
				border: 2upx solid #ddd;
				border-radius: 40upx;
			}
		}
		.J_scanIcon {
			position: absolute;
			right: 36upx;
			top: 34upx;
			z-index: 99;
			width: 80upx;
			text-align: center;
		}
	}
	
	.J_content {
		padding: 20upx 0 60px;
		background: #F5F5F5;
		.J_card {
			border-top: 2upx solid #ddd;
			border-bottom: 2upx solid #ddd;
			height: auto;
			background: #fff;
			padding: 0 32upx;
			color: #3C3C3C;
			margin-bottom: 20upx;
			overflow: hidden;
			
			&.isSlide, &:first-child {
				height: auto;
			}
			
			&:last-child {
				margin-bottom: 0;
			}
	
			.uni-row {
				border-bottom: 2upx solid #e5e5e5;
				padding: 18upx 0;
				&.no_border {
					border-bottom: 0;
				}
				&:first-child {
					padding: 28upx 0;
				}
				&:last-child {
					border-bottom: 0;
				}
				&.isSlide {
					display: none!important;
				}
				.J_tit {
					height: 44upx;
					line-height: 44upx;
					font-size: 30upx;
					position: relative;
					padding-left: 32upx;
					font-weight: bold;
					overflow: hidden;
					width: 100%;
					.J_cicon {
						position: absolute;
						left: 0;
						top: 0;
						width:12upx;
						height: 44upx;
						background: #FFC12E;
						display: block;
					}
					.J_slideIcon {
						position: absolute;
						right: 0;
						top: 6upx;
					}
				}
				.J_label {
					width: 184upx;
				}
				.J_des {
					flex: 1;
					position: relative;
					text-align: right;
					.uni-input {
						padding: 0 56upx 0 24upx;
					}
				}
				
				&.J_editWrap {
					position: relative;
					padding-right: 52upx;
					border-bottom: 2upx solid #ffb200;
					.J_editIcon {
						position: absolute;
						right: -52upx;
						top: 0;
						width: 40upx;
					}
					
					&.J_editWrapS {
						padding-right: 0;
						.uni-input {
							padding: 0 0 0 24upx;
						}
					}
				}
			}
		}
	}
	
	.uni-btn-v {
		display: flex;
		justify-content: center;
		&.J_foot {
			position: fixed;
	    bottom: 0;
	    left: 0;
	    right: 0;
			background: #fff;
	    box-shadow: 0px 0px 20upx rgba(0,0,0,0.2);
			padding: 0;
		}
		.zbtn {
			width: 24%;
			font-size: 32upx;
	    display: block;
	    border-radius: 0;
	    margin: 0;
	    height: 100upx;
	    line-height: 100upx;
			background: #fff;
			&:after {
				width: 0;
				height: 0;
			}
		}
		.J_last {
			background: #eabc4f;
			color: #fff;
		}
		.J_cancel {
			color: #000;
		}
		.J_sub {
			background: #018DEE;
	    color: #fff;
			flex: 1;
		}
	}
}

.J_conditionWrap {
	align-items: center;
	background: #fff;
	margin-bottom: 20upx;
	padding-left: 20upx;
	.zuiForm {
		$zuiForm_height: 90upx;
		.uni-row {
			background: #fff;
			padding: 8upx 0;
			border-bottom: 2upx solid #F6F6F6;
			.zpicker {
				display: block;
				width: 100%;
				height: $zuiForm_height;
				line-height: $zuiForm_height;
			}
			.des {
				width: 160upx;
				line-height: $zuiForm_height;
				padding-left: 30upx;
				position: relative;
				.zrequire {
					color: #ff0000;
					display: inline-block;
					position: absolute;
					left: 8upx;
					top: 4upx;
					font-style: normal;
				}
			}
			.inputwrap {
				padding-right: 40upx;
				color: #6b6b6b;
				display: flex;
				align-items: center;
				.uni-input {
					padding: 0;
					color: #6b6b6b;
					height: $zuiForm_height;
					line-height: $zuiForm_height;
				}
				.text {
					height: $zuiForm_height;
					line-height: $zuiForm_height;
					.cdes {
						padding-left: 26upx;
					}
				}
				.cdes {
					height: $zuiForm_height;
					line-height: $zuiForm_height;
				}
			}
		}
		.uni-common-mt {
			padding: 10upx 40upx;
		}
		.uni-title {
			padding-left: 30upx;
		}
		.uni-textarea {
			position: relative;
			uni-textarea {
				max-height: 500upx;
				text-indent: 18upx;
			}
			.textareaDes {
				position: absolute;
				right: 30upx;
				top: -68upx;
				font-size: 24upx;
				span {
					font-style: italic;
					font-size: 34upx;
					margin: 0 12upx 0 6upx;
				}
			}
		}
	}
	.J_inputWrap {
		height: 92rpx;
    line-height: 92rpx;
		.uni-input {
			height: 92rpx;
			line-height: 92rpx;
			min-height: 92rpx;
			padding: 0 24upx;
			border-bottom: 2px solid #eabc4f;
			/deep/ .uni-input-input {
				height: 92rpx;
				line-height: 92rpx;
				min-height: 92rpx;
			}
		}
	}
}
.J_radio {
	.uni-list-cell-pd {
		padding: 11px 10px 11px 0;
	}
}
</style>
